<template>
    <div class="box">
        <div class="title">{{ title }}</div>
        <div class="disc" v-if="disc !== 'undefined'" :style="{ color }">
            <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s" :size="40">
            </bNumber>
            {{ unit }}
        </div>
        <div v-else class="disc"></div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import bNumber from "../widget/b_number.vue";

interface prop {
    title: string
    disc?: string
    unit: string
    color: string
}
const props = defineProps<prop>()
const disc = computed(() => {
    if (!props.disc) return ''
    else
        return props.disc
})
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: #dfdfdf20;
}

.title {
    font-size: 1.3em;
}

.disc {
    display: flex;
    align-items: center;
    font-size: 1.6em;
    color: #f9e433;
    line-height: 1.6em;
    height: 1.6em;
}
</style>